<template>
  <a-layout class="basic-layout">
    <GlobalHeader />
    <a-layout-content class="main-content">
      <router-view v-slot="{ Component }">
        <transition name="page" mode="out-in">
          <component :is="Component" />
        </transition>
      </router-view>
    </a-layout-content>
    <!-- GlobalFooter 已移除 -->
  </a-layout>
</template>

<script setup lang="ts">
import GlobalHeader from '@/components/GlobalHeader.vue'
</script>

<style scoped>
.basic-layout {
  background: none;
}

.main-content {
  width: 100%;
  padding: 0;
  background: none;
  margin: 0;
  perspective: 1200px; /* Add perspective for 3D transforms */
}

/* 页面切换过渡 */
:deep(.page-enter-active),
:deep(.page-leave-active) {
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1); /* Smoother ease */
}

:deep(.page-leave-active) {
  position: absolute; /* Avoid jumping content */
  width: 100%;
  z-index: -1;
}

:deep(.page-enter-from) {
  opacity: 0;
  transform: translateZ(100px) rotateY(20deg);
}

:deep(.page-leave-to) {
  opacity: 0;
  transform: translateZ(-100px) rotateY(-20deg);
}
</style>
